<template>
	<view>
		<su-sticky bgColor="#fff" zIndex="999">
			<view class="pk-top">
				<view class="pk-top-left">
					共<text class="left-text">{{state.list.length}}</text>款车
				</view>
				
				<view class="car-content">
					<scroll-view scroll-x :scroll-left="state.scrollLeft" @scroll="scrollParams">
						<view class="car-scroll-content">
							<view class="pk-car-item" v-for="item in state.list">
								<view class="del-car" @click="deleteSelect(item)" v-if="props.isStore" >
									<uni-icons type="closeempty" size="12"></uni-icons>
								</view>
								<view class="item-name">{{item.name}}</view>
								<view class="price-content">
									<text class="price-title">指导价：</text>
									<text class="price-text">{{item.price}}</text>
								</view>
							</view>
							
							<!-- 新增车辆 -->
							<view v-if="props.isStore" class="pk-car-item add-car-item" @click="showPkCar()">
								<uni-icons type="plusempty" size="20" color="#999"></uni-icons>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</su-sticky>
			
		<view class="pk-table">
			<view class="pk-table-left">
				<view class="params-item" v-for="item in paramsList">
					<!-- 参数title -->
					<su-sticky bgColor="#fff" offsetTop="160rpx">
						<view class="params-title ss-flex ss-row-between">
							<view class="item-title">{{item.title}}</view>
							<view class="item-submk">
								<text>● 标配</text>
								<text>○ 选配</text>
								<text>-无</text>
							</view>
						</view>
					</su-sticky>
					
					<!-- 参数名称 -->
					<view class="pk-table-content" v-for="column in item.columns">
						<view class="col-title" :style="{height: 70 * (column.key == 'color' ? 3 : (column.title.length > 6 ? 2 : 1) ) + 'rpx'}">{{column.title }}</view>
					</view>
				</view>
			</view>
			
			<view class="car-content pk-table-right">
				<scroll-view scroll-x :scroll-left="state.scrollLeft" @scroll="scrollParams">
					<!-- 汽车参数 -->
					<view class="pk-table-group" v-for="item in paramsList">
						<view class="pk-table-content" v-for="column in item.columns">
							<view class="car-scroll-content">
								<view 
									class="pk-car-item params-item" 
									:style="{height: 70 * (column.key == 'color' ? 3 : (column.title.length > 6 ? 2 : 1) ) + 'rpx'}" 
									v-for="listItem in state.list">
										<block v-if="column.key == 'color' || column.key == 'interiorcolor'" >
											<view class="ss-flex" v-if="listItem[item.key]">
												<view 
													v-for="color in getColor(listItem[item.key][column.key])"
													class="column-color"
													:style="{background: color[1]}"
												></view>
											</view>
										</block>
										<block v-else-if="listItem[item.key]">
											<text class="params-text" v-if="listItem[item.key][column.key] == '有'">
												●
											</text>
											<text class="params-text" v-else-if="listItem[item.key][column.key] == '无'">
												○
											</text>
											<text class="params-text" v-else>
												{{listItem[item.key][column.key] || '-'}}
											</text>
										</block>
									</view>
								
								<!-- 新增车辆占位 -->
								<view  
									v-if="props.isStore" 
									class="pk-car-item params-item" 
									:style="{height: 70 * (column.key == 'color' ? 3 : (column.title.length > 6 ? 2 : 1) ) + 'rpx'}"
								></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<select-pk-car ref="pkCarRef" @select="selectCar"></select-pk-car>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed, watch} from 'vue';
	import paramsList from './car-params/paramsList';
	import SelectPkCar from './selectPkCar';
	
	import debounce from '@/sheep/libs/debounce'
	
	const props = defineProps({
		// 车型列表
		carListIds: {
			type: Array,
			default: () => []
		},
		isStore: {
			type: Boolean,
			default: false
		}
	})
	
	const pkCar = sheep.$store('pkCar');
	const state = reactive({
		scrollLeft: 0,
		list: [], // 对比车型
		selectedIds: computed(() => pkCar.selectedIds),
	});
	
	// 参数滚动
	function scrollParams(e) {
		debounce(() => {
			state.scrollLeft = e.detail.scrollLeft
		}, 1)
	}
	
	// 选择pk车辆
	const pkCarRef = ref(null)
	function showPkCar() {
		pkCarRef.value.showDrawer();
	}
	function closePkCar() {
		pkCarRef.value.closeDrawer();
	}
	
	function getColor(colors) {
		return colors ? (colors.split('|').map(i => i.split(','))) : []
	}
	
	async function getCarDetailsList(ids) {
		const res = await sheep.$api.car.carDetails({ids: ids})
		state.list = res.data.map(item => item.car_details_json.result ? item.car_details_json.result : item.car_details_json)
	}
	
	// 删除选中
	function deleteSelect(item) {
		if(props.isStore) {
			pkCar.selectSingle(item.id);
			getCarDetailsList(props.carListIds.join(','));
		}else {
			
		}
	}
	// 选择选中
	function selectCar(e) {
		if(props.isStore) {
			pkCar.add(e)
			pkCar.selectSingle(e.car_id);
			getCarDetailsList(props.carListIds.join(','));
		}else {
			
		}
	}
	
	
	if (props.carListIds.length > 0) {
		getCarDetailsList(props.carListIds.join(','));
	}
</script>

<style lang="scss" scoped>
	$solid-color: #eaedf0;
	
	.column-color {
		width: 30rpx;
		height: 30rpx;
		border-radius: 30rpx;
		margin-right: 10rpx;
	}
	
	.pk-top {
		display: flex;
		margin-top: 10rpx;
	}
	
	.pk-top-left {
		text-align: center;
		width: 180rpx;
		min-width: 180rpx;
		height: 160rpx;
		line-height: 130rpx;
		font-size: 22rpx;
		border-right: 1rpx solid $solid-color;
		box-sizing: border-box;
		
		.left-text {
			color: #ff6400;
		}
	}
	
	// 右侧滚动内容
	.car-content {
		flex: 1;
		min-width: 300rpx;
		
		.car-scroll-content {
			width: fit-content;
			display: flex;
		}
		
		.pk-car-item {
			position: relative;
			padding: 15rpx 25rpx 15rpx 15rpx;
			width: 250rpx;
			height: 160rpx;
			border-right: 1rpx solid $solid-color;
			box-sizing: border-box;
			
			.del-car {
				position: absolute;
				right: 0;
				top: 0;
				background: #f7f8fb;
				width: 30rpx;
				height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.item-name {
				font-size: 24rpx;
			}
			.price-content {
				font-size: 20rpx;
				margin-top: 20rpx;
				
				.price-title {
					color: #999;
				}
				.price-text {
					color: #ff6400;
				}
			}
		}
		
		.add-car-item {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.params-item {
			display: flex;
			align-items: center;
			.params-text {
				font-size: 22rpx;
			}
		}
	}
	
	.pk-table {
		display: flex;
		
		.pk-table-left {
			width: 180rpx;
			background-color: #fff;
		}
		.pk-table-right {
			background-color: #fff;
			
			.pk-table-group {
				padding-top: 60rpx;
			}
		}
		.params-item {
			.params-title {
				height: 60rpx;
				width: 750rpx;
				background-color: #f7f8fb;
			}
			.item-title {
				line-height: 60rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				border-top: 1rpx solid $solid-color;
				color: #2d313e;
				font-weight: 500;
			}
			
			.item-submk {
				font-size: 20rpx;
				
				text {
					margin-right: 20rpx;
				}
			}
		}
		
		.pk-table-content {
			display: flex;
			border-top: 1rpx solid $solid-color;
			
			.col-title {
				display: flex;
				align-items: center;
				padding: 20rpx;
				width: 180rpx;
				font-size: 22rpx;
				border-right: 1rpx solid $solid-color;
				// text-decoration: underline;
				box-sizing: border-box;
			}
		}
	}
</style>